import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Text, Image, TouchableOpacity } from "react-native";
import { Icon } from "@rneui/themed";
import { useSelector, useDispatch } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import { sectokenAccountSettingProps } from '@/config/navigatorProps'
import { PayWithArray } from '@/config/config'
import WalletConnectimg from '@/assets/safe/wallet_connect.png'
import Deleteimg from '@/assets/safe/delete.png'
import { getValue, setObjectValue } from '@/utils/deviceStorage'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenAccountSetting = (props) => {

    const dispatch = useDispatch()
    const selectedSafeWallet = useSelector((state) => state.sectokenMainReducer.selectedSafeWallet || {});
    const [safeWalletList, setSafeWalletList] = useState([]);

    useEffect(() => {
        let list = getValue('safeWalletList')
        setSafeWalletList(list)
    }, []);

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressName = () => {
        props.navigation.navigate('safe-account-setting-edit')
    }

    const handlePressConnect = () => {

    }

    const handlePressRemove = () => {
        if (safeWalletList && safeWalletList.length > 0) {
            for (let i = 0; i < safeWalletList.length; i++) {
                if (safeWalletList[i].id == selectedSafeWallet.id) {
                    safeWalletList.splice(i, 1)
                    break
                }
            }
            if (safeWalletList.length == 0) {
                dispatch({ type: "setSelectedSafeWallet", value: {} });
                setObjectValue('safeWalletList', [])
                props.navigation.navigate('safe-no-account')
            } else {
                dispatch({ type: "setSelectedSafeWallet", value: safeWalletList[0] });
                setObjectValue('safeWalletList', [...safeWalletList])
            }
        }
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenAccountSettingProps} handlePressLeft={handlePressLeft} />
            <TouchableOpacity style={{ ...styles.content1, marginTop: 10 * ratio }} onPress={handlePressName}>
                <View style={{ flex: 8, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }}>
                    <Image source={PayWithArray[selectedSafeWallet.profileImg]} style={styles.img1} />
                    <Text style={{ ...styles.title1, marginLeft: 13 * ratio }}>{selectedSafeWallet.label}</Text>
                </View>
                <View style={{ flex: 2, justifyContent: 'center', alignItems: 'flex-end' }}>
                    <Icon style={{ marginRight: 15 * ratio }} type='antdesign' name='right' color='#000000' size={13} />
                </View>
            </TouchableOpacity>
            <Text style={{ ...styles.title3, marginLeft: 15 * ratio, marginTop: 17 * ratio, marginBottom: 17 * ratio }}>
                REQUIPED CONFIRMATIONS
            </Text>
            <View style={styles.content1}>
                <Text style={{ ...styles.title2, marginLeft: 15 * ratio }}>
                    {selectedSafeWallet.ownerNumber || 1} out of {selectedSafeWallet.ownerList && selectedSafeWallet.ownerList.length || 1}
                </Text>
            </View>
            <Text style={{ ...styles.title3, marginLeft: 15 * ratio, marginTop: 17 * ratio, marginBottom: 17 * ratio }}>
                OWNERS {selectedSafeWallet.ownerNumber || 1}
            </Text>
            <View style={styles.content2}>
                {selectedSafeWallet && selectedSafeWallet.ownerList ? selectedSafeWallet.ownerList.map((item, index) => {
                    return (
                        <View key={index} style={styles.itemContent}>
                            <Image source={PayWithArray[item.profileImg]} style={styles.img1} />
                            <View style={{ alignItems: 'flex-start', justifyContent: 'center', marginLeft: 7 * ratio }}>
                                <Text style={styles.title2}>{item.label}</Text>
                                <Text ellipsizeMode='middle' numberOfLines={1}
                                    style={{ ...styles.title2, color: '#767B7D', width: 100 * ratio }}>
                                    {item.address}
                                </Text>
                            </View>
                        </View>
                    )
                }) :
                    <View style={{ width: width, height: 60 * ratio, backgroundColor: '#FFFFFF' }}></View>}
            </View>
            <Text style={{ ...styles.title3, marginLeft: 15 * ratio, marginTop: 17 * ratio, marginBottom: 17 * ratio }}>
                Connect & Transact
            </Text>
            <TouchableOpacity style={styles.content3} onPress={handlePressConnect}>
                <Image source={WalletConnectimg} style={styles.img1} />
                <Text style={{ ...styles.title2, marginLeft: 11 * ratio }}>WalletConnect</Text>
            </TouchableOpacity>
            <TouchableOpacity style={{ flexDirection: 'row', marginTop: 20 * ratio, alignItems: 'center' }} onPress={handlePressRemove}>
                <Image source={Deleteimg} style={styles.img2} />
                <Text style={{ ...styles.title2, color: '#FF0000', marginLeft: 13 * ratio }}>Remove Safe</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F7F7F7'
    },
    content1: {
        width: width,
        height: 44 * ratio,
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        alignItems: 'center'
    },
    content2: {
        width: width,
        backgroundColor: '#FFFFFF'
    },
    content3: {
        width: width,
        height: 60 * ratio,
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        alignItems: 'center'
    },
    itemContent: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        height: 60 * ratio
    },
    img1: {
        width: 30 * ratio,
        height: 30 * ratio,
        marginLeft: 15 * ratio
    },
    img2: {
        width: 20 * ratio,
        height: 20 * ratio,
        marginLeft: 15 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24
    },
    title2: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 21
    },
    title3: {
        fontSize: 12,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#767B7D',
        lineHeight: 18
    }
})
export default SectokenAccountSetting